<template>
    <div class="person-content">
        <div class="content-box">
            <h3>加油，你可以的！
                <!-- <button @click="updateData" class="blue-button">上传知识成果</button> -->
            </h3>
            <div class="show-box">
                <div class="name"><span></span>专利</div>
                <div class="box clear-fix" @click="showImage">
                    <div class="img-box">
                        <img preview="0" src="../../assets/image/knowledge_1.png" alt="konwledge">
                        <p>多功能建筑xxx用具新型专用</p>
                    </div>
                    <div class="img-box">
                        <img preview="1" src="../../assets/image/knowledge_1.png" alt="konwledge">
                        <p>多功能建筑xxx用具新型专用</p>
                    </div>
                    <div class="img-box">
                        <img preview="2" src="../../assets/image/knowledge_1.png" alt="konwledge">
                        <p>多功能建筑xxx用具新型专用</p>
                    </div>
                </div>
            </div>
            <div class="show-box">
                <div class="name"><span></span>工法</div>
                <div class="box clear-fix" @click="showImage">
                    <div class="img-box">
                        <img preview="0" src="../../assets/image/knowledge_2.png" alt="knowledge">
                        <p>国家级工法证书国家…</p>
                    </div>
                    <div class="img-box">
                        <img preview="1" src="../../assets/image/knowledge_2.png" alt="knowledge">
                        <p>国家级工法证书国家…</p>
                    </div>
                    <div class="img-box">
                        <img preview="2" src="../../assets/image/knowledge_2.png" alt="knowledge">
                        <p>国家级工法证书国家…</p>
                    </div>
                </div>
            </div>
            <div class="show-box">
                <div class="name"><span></span>科技成果</div>
                <div class="box clear-fix" @click="showImage">
                    <div class="img-box">
                        <img preview="0" src="../../assets/image/knowledge_3.png" alt="knowledge">
                        <p>科学技术成果证书</p>
                    </div>
                    <div class="img-box">
                        <img preview="1" src="../../assets/image/knowledge_3.png" alt="knowledge">
                        <p>科学技术成果证书</p>
                    </div>
                    <div class="img-box">
                        <img preview="2" src="../../assets/image/knowledge_3.png" alt="knowledge">
                        <p>科学技术成果证书</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="活动名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="活动区域" :label-width="formLabelWidth">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog> -->
    </div>
</template>

<script>
export default {
    name: "user-knowledge",
    methods: {
        updateData() {},
        showImage(ev) {
            // if (ev.target.nodeName == "IMG") {
            //     console.log(ev.target.src);
            // }
        }
    }
};
</script>

<style scoped>
@import "../../assets/css/person.css";
.blue-button {
    background: #3581fb;
    border-radius: 2px;
    width: 110px;
    height: 40px;
    font-size: 13px;
    color: #ffffff;
    outline: none;
    border: none;
    float: right;
}

.box .img-box {
    width: 150px;
}
.show-box:first-of-type .box .img-box img {
    width: 104px;
    margin-left: 23px;
}

.box p {
    width: 144px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 8px;
}
</style>
